/*
 * @Description: 备份计划弹窗 - 触发面板
 * @Author: Rfan
 * @Date: 2022-08-03 20:29:15
 * @LastEditTime: 2022-08-15 21:01:00
 */

import { useState } from 'react';
import { Button, Checkbox, FormInstance, Modal, Space, Table } from 'antd';
import { useFormatMessage } from '@/utils/intlHelpers';
import TriggerCondition from './Condition/TriggerCondition';
import type { CheckboxValueType } from 'antd/lib/checkbox/Group';
import type { IPageQuery } from '@/interfaces/global';

const { Column } = Table;

interface ITriggerPaneProps {
  form: FormInstance;
}
function TriggerPane(props: ITriggerPaneProps) {
  const { form } = props;
  const formatMessage = useFormatMessage();
  const [FormVisible, setFormVisible] = useState(false);

  // 表格选中的项目
  const [selectItems, setSelectKey] = useState([]);
  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });

  /**
   * @description: 选中条目变化方法
   * @param {number} selectedRowKeys 选中的条目key
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };
  const onCancel = () => {
    setFormVisible(false);
  };
  /**
   * @description 提交表单，触发onFinish方法
   */
  const submitFunc = () => {
    form.submit();
    onCancel();
  };
  const onChange = (checkedValues: CheckboxValueType[]) => {
    console.log('checked = ', checkedValues);
  };
  const plainOptions = ['手动触发', '计划创建立即执行一次备份', '自动备份'];
  return (
    <div>
      <Checkbox.Group options={plainOptions} onChange={onChange} />
      <div className="trigger-operate">
        <Button type="primary" onClick={() => setFormVisible(true)}>
          添加条件
        </Button>
        <Button type="primary">删除</Button>
      </div>
      <Table
        dataSource={[{ id: 1 }]}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: () => {}
        }}
      >
        <Column title="序号" dataIndex="id" key="id" align="center" />
        <Column title="规则类型" dataIndex="title" key="title" align="center" />
        <Column title="规则表达式" dataIndex="transferStatus" key="transferStatus" align="center" />
        <Column title="备注" dataIndex="transferPerson" key="transferPerson" align="center" />
        <Column title="状态" dataIndex="transferTime" key="transferTime" align="center" />
        <Column
          title={formatMessage('tableAction')}
          key="action"
          align="center"
          render={(_text, record: any) => (
            <Space direction="vertical">
              <Button type="link" size="small" onClick={() => {}}>
                修改
              </Button>
              <Button type="link" size="small" danger onClick={() => {}}>
                删除
              </Button>
            </Space>
          )}
        />
      </Table>
      <Modal
        title="触发条件设定"
        visible={FormVisible}
        destroyOnClose
        onCancel={onCancel}
        footer={[
          <Button key="close" onClick={onCancel}>
            取消
          </Button>,
          // <Button key="createAdd" type="primary">创建并添加档案</Button>,
          <Button
            key="yes"
            type="primary"
            onClick={() => {
              submitFunc();
            }}
          >
            添加
          </Button>
        ]}
      >
        <TriggerCondition
          form={form}
          visible={FormVisible}
          closeDialog={() => {
            onCancel();
          }}
        />
      </Modal>
    </div>
  );
}

export default TriggerPane;
